<template>
  <div class="content">
    <div class="contain">
      <div class="content_left_top d-none d-lg-block">
        <img src="@static/content_left_top.png" alt="">
      </div>
      <div class="content_right_bottom d-none d-lg-block">
        <img src="@static/content_right_bottom.png" alt="">
      </div>

      
        <div class="message col-12 col-md-3">
          <div class="message_con ">
            <h2>我们是一家</h2>
            <h3>数字化营销的技术提供商</h3>
            <p>专注于新零售业态，助力个人店铺、中小微企业全渠道推广和运营</p>
            <p>凭借专业的运营团队为广告主提供一站式精准移动
              广告投放服务，并率先推出后台智能识别系统，精
              准识别流量来源，并进行全渠道针对性的流量运营
              推广!
            </p>
          </div>
        </div>
        <div class="content_mess d-col-none  col-sm-pull-3 d-sm-none d-md-none d-lg-none d-xl-block">
          <div class="extension common ">
            <div class="top_block" :style="{backgroundImage:`url(${top_block})`}">
              <span>针对性推广</span>
            </div>
            <span class="describe">
              后台智能识别流量来源，从而进行针对性的运营推广
            </span>
          </div>
          <div class="service common">
            <div class="middle_block" :style="{backgroundImage:`url(${middle_block})`}">
    
              <span>全渠道发布</span>
            </div>
            <span class="describe">可发布到iOS、Android、H5以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝），块应用等多个平台</span>
          </div>
          <div class="release common">
            <div class="bottom_block" :style="{backgroundImage:`url(${bottom_block})`}">
              <span>一站式服务</span>
            </div>
            <span class="describe">
              ai智能名片系统<br />
              各行业的智能5端小程序<br />
              同后端全渠道的智能分销系统r<br />
              基于大数据的锁客智能客服体系<br />
              独创的智能库存分销系统<br />
    
            </span>
          </div>
        </div>
        <div class="content_mess_block">
          <div class="extension common ">
            <div class="same">针对性推广</div>
            <div class="describe">
              后台智能识别流量来源，从而进行针对性的运营推广
            </div>
          </div>
          <div class="service common">
    
              <div class="same">全渠道发布</div>
            <div class="describe">可发布到iOS、Android、H5以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝），块应用等多个平台</div>
          </div>
          <div class="release common">
              <div class="same">一站式服务</div>
            <div class="describe">
              ai智能名片系统<br />
              各行业的智能5端小程序<br />
              同后端全渠道的智能分销系统r<br />
              基于大数据的锁客智能客服体系<br />
              独创的智能库存分销系统<br />
    
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      top_block:require('@static/content_extension.png'),
      middle_block:require('@static/content_release.png'),
      bottom_block:require('@static/content_service.png')
    }
  }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
    .content {
      width:90% !important
      height:450px !important
      margin:0 5%
      .contain{
        // width:92% !important
        // margin-right:15px !important
        margin-top:20px !important 
        margin-bottom:20px !important
        .content_mess_block{
          height:200px !important
          .common{
            width: 90%
            // height: 127px
            font-size: 15px
            color: #333
            .same{
              font-weight:700
              line-height:20px
            }
            .describe{
              font-size:10px
              line-height:15px
              margin:10px 0
            }
          }
          
          // display:block !important
        }

      }
      .message{
        margin-top:250px !important

        height:220px !important
        padding:0px 15px !important
        // padding-bottom:15px !important
        margin-bottom:0px !important

        // bottom:0 !important
        height:200px !important
        text-align:center !important
        position:absolute !important
        top:0px !important
        left: 0px !important
        // margin:0 15px !important
      
        .message_con{
          // width:100% !important
          
          
          
          h2{
            font-size:20px !important
            padding-top:10px !important
          }
          h3{
            font-size:15px !important
            margin-top:10px !important
          }
          p{
            font-size:10px !important
            line-height: 15px !important
            margin-top:10px !important

          }
          // h3
          //   font-size:30px
          //   font-weight:700
          //   margin-top:36px
          // span
          //   line-height: 35px
          //   margin-top:50px
          //   display:block
          //   font-size:20px
          //   letter-spacing:2px
        }
      }
      
    }
}
/*sm*/
// @media (min-width: 576px) {
//   .content {
//       .message{
//         bottom:0 !important
//         height:200px !important
//         margin-bottom:20px !important
        
//         .content_mess{
//           position:relative !important
//           right:-400px !important

//         }
//         .message_con{
//           width:100% !important
//           text-align:center !important
//           // width:390px
//           padding:0 !important
//           h2{
//             font-size:20px !important
//             padding-top:20px !important
//           }
//           h3{
//             font-size:15px !important
//             margin-top:20px !important
//           }
//           p{
//             font-size:10px !important
//             line-height: 12px !important
//             margin-top:20px !important

//           }
         
//         }
//       }
//     }
  
// }
// /*md*/
// @media (min-width: 768px) {
//    .content {
//       padding-left:0px  !important
//       width:100% !important
//       margin-bottom:20px !important

//       .message{
//         width:100% !important
//         height:300px !important
//         padding-left:15px !important
//         // width:496px !important 
//         position:relative !important 
//         // margin-left:10% !important 
//         .message_con{
//           width:100% !important
//           text-align:center !important
        
//           // width:390px
//           padding:0 !important
//           h2{
//             font-size:30px !important
//             padding-top:30px !important
//           }
//           h3{
//             font-size:20px !important
//             margin-top:30px !important
//           }
//           p{
//             font-size:20px !important
//             line-height: 22px !important
//             margin-top:30px !important

//           }
//         }
//       }
//     }
// }

/*lg*/
@media (min-width: 992px) {
  .content{
    height:800px !important
    width:100% !important 
    position:relative !important 
    .contain{
      height:600px !important

    }
    .contain .content_left_top{
        position:absolute !important 
        left:-66px !important 
    }
    .contain .content_right_bottom{
        position:absolute !important 
        // right:-66px !important 
        bottom: 0 !important
    }
   
    .message{

        width:496px !important
        
        height: 736px !important
        background:rgba(163, 173, 246,.5) !important
        bottom:-300px !important
        position:absolute !important
        top:101px !important
        left: 200px !important
        z-index: 100 !important
        .content_mess{
          position:relative !important
          right:-400px !important

        }
        .message_con{
          text-align:left !important
          margin: 0 auto
          width:390px !important
          height:100% !important
          padding: 48px 18px !important
          h2{
            
              font-size:30px !important
              font-weight:700 !important
          }
          h3{
              font-size:30px !important
              font-weight:700 !important
              margin-top:36px !important
          }
          p{
              line-height: 35px !important
              margin-top:50px !important
              display:block !important
              font-size:20px !important
              letter-spacing:2px !important
          }
      }
          
    }
  }

        // width:476px
}
/*xl*/
// @media (min-width: 1200px) {
//    .content{
//     height:850px !important
//     width:100% !important 
//     position:relative !important 
//     .contain{
//       height:600px !important

//     }
//     .contain .content_left_top{
//         position:absolute !important 
//         left:-66px !important 
//     }
//     .contain .content_right_bottom{
//         position:absolute !important 
//         right:-66px !important 
//         top: 0 !important
//     }
   
//     .message{

//         width:496px !important
        
//         height: 736px !important
//         background:rgba(163, 173, 246,.5) !important
//         bottom:-300px !important
//         position:absolute !important
//         top:301px !important
//         left: 200px !important
//         z-index: 100 !important
//         .content_mess{
//           position:relative !important
//           right:-400px !important

//         }
//         .message_con{
//           text-align:left !important
//           margin: 0 auto
//           width:390px !important
//           height:100% !important
//           padding: 48px 18px !important
//           h2{
            
//               font-size:30px !important
//               font-weight:700 !important
//           }
//           h3{
//               font-size:30px !important
//               font-weight:700 !important
//               margin-top:36px !important
//           }
//           p{
//               line-height: 35px !important
//               margin-top:50px !important
//               display:block !important
//               font-size:20px !important
//               letter-spacing:2px !important
//           }
//       }
          
//     }
//   }

// }
  .content
    width:100%
    height:800px
    .contain
      width:100%
      margin:0 auto
      position:relative
      .content_left_top
        position:absolute
        left: 0
        top: -15px
        z-index: 2
      .content_right_bottom
        position:absolute
        right: 0
        top: 113px
      // .wrap_mess
      //   width:1200px
      //   height: 800px
      //   margin:0 auto
      //   position relative

      .message
        // width:476px
        height: 736px
        background:rgba(163, 173, 246,.5)
        position:relative
        bottom:-300px
        position:absolute
        top:201px
        left: 416px
        z-index: 100
        .message_con
          // width:390px
          // padding: 48px 43px
          
          
          
          h2
            font-size:30px
            font-weight:700
          h3
            font-size:30px
            font-weight:700
            margin-top:36px
          p
            line-height: 35px
            margin-top:50px
            display:block
            font-size:20px
            letter-spacing:2px
      .content_mess
        position:relative
        height:800px

        .extension
          position: absolute
          right: 0px
          top: 100px
          .top_block
            width: 397px
            height: 127px
            font-weight:700

            span
              display:block
              position:absolute
              right: 92px
              top: 18px
          .describe
            width: 437px
            position:absolute
            right: -138px
            color: #444444
            top:107px
            font-size:19px
            
            // background-image:url('@static/content_extension.png')
        .service
          position: absolute
          right: 0px
          top: 300px
          .middle_block
            width: 402px
            height: 64px
            font-weight:700

            span
              display:block
              position:absolute
              right: 92px
              top: 18px
          .describe
            width: 437px
            position:absolute
            right: -138px
            color: #444444
            top:107px
            font-size:19px
            letter-spacing 1px
            line-height: 30px
            
        .release
          position: absolute
          right: 0px
          top: 534px
          .bottom_block
            width: 402px
            height: 64px
            font-weight:700

            span
              display:block
              position:absolute
              right: 92px
              top: 18px
          .describe
            width: 437px
            position:absolute
            right: -138px
            color: #444444
            top:107px
            font-size:19px
            letter-spacing 1px
            line-height: 30px

        .common
          width: 397px
          height: 127px
          font-size: 25px
          color: #FFF
          // margin-top:100px

</style>